<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>动态雷达扫描</title>
    <style>
        .app {
            width: 100%;
            height: 100vh;
            background-color: #ffffff;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .leidabox50 {
            width: 220px;
            height: 220px;
            border: 4px solid rgba(0, 0, 0, 0);
            border-top-color: #33B589;
            border-bottom-color: #33B589;
            border-radius: 50%;
            position: absolute;
            animation: leidabox-eff-50 10s linear infinite;
            animation-direction: reverse;
        }

        @keyframes leidabox-eff-50 {
            to {
                transform: rotate(360deg);
            }
        }

        .leida50 {
            width: 200px;
            height: 200px;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            background-color: #31FFBA;
            border-radius: 50%;
            border: 1px solid #33B589;
        }

        .leida50:before,
        .leida50:after {
            content: '';
            width: 120px;
            height: 120px;
            border-radius: 50%;
            border: 1px dashed rgba(0, 0, 0, 0.14);
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
            position: absolute;
            z-index: 3;
        }

        .leida50:after {
            width: 60px;
            height: 60px;
            position: absolute;
            z-index: 10;
        }

        .line50 {
            width: 100px;
            height: 100px;
            background-color: rgba(127, 255, 212, 0.4);
            border-radius: 0 0 0 100%;
            position: absolute;
            left: 0;
            top: 100px;
            z-index: 100;
            animation: zhuaneff50 5s linear infinite;
            transform-origin: 100px 0;
        }

        .line50:after {
            content: '';
            width: 8px;
            height: 8px;
            background-color: rgba(255, 255, 255, 0.6);
            position: absolute;
            top: -4px;
            right: -4px;
            border-radius: 50%;
        }

        @keyframes zhuaneff50 {
            to {
                transform: rotate(360deg);
            }
        }

        .guangdian50 {
            position: absolute;
            bottom: 66px;
        }

        .dian50,
        .dian50:after,
        .dian50:before {
            width: 7px;
            height: 7px;
            background-color: #33B589;
            position: absolute;
            left: -20px;
            border-radius: 50%;
            animation: eff50 5s steps(6) infinite;
            z-index: 999;
        }

        .dian50:after {
            content: '';
            width: 6px;
            height: 6px;
            top: 12px;
            left: 44px;
        }

        .dian50:before {
            content: '';
            width: 3px;
            height: 3px;
            top: 40px;
            left: 34px;
        }

        @keyframes eff50 {
            0% {
                opacity: 0;
                transform: translate(0, 0);
            }

            25% {
                opacity: 1;
                transform: translate(-10px, -18px);
            }

            50% {
                opacity: 0;
                transform: translate(-18px, -20px);
            }

            75% {
                opacity: 1;
                transform: translate(-24px, -18px);
            }

            100% {
                opacity: 0;
                transform: translate(-34px, -24px);
            }
        }

        .guangdian50:after,
        .guangdian50:before {
            content: '';
            width: 6px;
            height: 6px;
            background-color: #33B589;
            position: absolute;
            top: -100px;
            left: 30px;
            border-radius: 50%;
            z-index: 900;
            animation: eff501 5s steps(6) both infinite;
        }

        .guangdian50:before {
            width: 7px;
            height: 7px;
            top: -20px;
            left: 40px;
        }

        @keyframes eff501 {
            0% {
                opacity: 0;
            }

            25% {
                opacity: 1;
            }

            50% {
                opacity: 0;
            }

            75% {
                opacity: 1;
            }

            100% {
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div class="app">
        <div class="leidabox50"></div>
        <div class="leida50">
            <div class="line50"></div>
            <div class="guangdian50">
                <span class="dian50"></span>
            </div>
        </div>
    </div>
</body>

</html>